<template>
	<view class="content u-skeleton">
		
		<!-- 导航栏 -->
		<u-navbar back-text="" :background="background" :is-back="false" title="π币"></u-navbar>
		
		<!-- 轮播 -->
		<view class="wrap u-skeleton-rect">
			<u-swiper @change="changeSwiper" :height="250" :list="swiperList" :title="false" :effect3d="true" 
			:indicator-pos="indicatorPos" :mode="mode" :interval="3000" @click="clickSwiper"></u-swiper>
		</view>
		
		<!-- 通知 -->
		<u-notice-bar mode="vertical" type="info" :list="listNotice" :more-icon="true"></u-notice-bar>
		
		<!-- grid-list-box -->
		<u-grid :col="3" class="grid-list-box">
			<u-grid-item class="u-skeleton-fillet" :key="item" v-for="item in 3">
				<view class="list-title grid-text"> BTC/USDT </view>
				<view class="list-price">11501.09</view>
				<view class="list-increase">-0.63%</view>
				<view class="list-cny grid-text">≈81302.58 CNY</view>
			</u-grid-item>
		</u-grid>
		
		
		
		<!-- tab -->
		<c-rank>`</c-rank>
		
		<!-- 广告 -->
		<image class="ad-image" src="/static/ad/ad.149d9604.jpg" mode="aspectFit" @click=""></image>
		
		<u-table :borderColor="'none'" class="product-list">
			<u-tr class="u-tr">
				<u-th class="u-th">名称</u-th>
				<u-th class="u-th">最新价</u-th>
				<u-th class="u-th">涨跌幅</u-th>
			</u-tr>
			<u-tr class="u-tr product-list-item" :key="item" v-for="item in 10">
				<u-td class="u-td product-title"> BTC/USDT </u-td>
				<u-td class="u-td"> 11501.09 </u-td>
				<u-td class="u-td">
					<block v-if="item%2">
						<u-button type="error" size="mini">-0.63%  </u-button>
					</block>
					<block v-else>
						<u-button type="warning" size="mini">+0.63% </u-button>
					</block>
					
				</u-td>
			</u-tr>
		</u-table>	
		
		
		
		<!-- <image class="logo" src="/static/logo.png"></image> -->
<!-- 		<view class="text-area">
			<text class="title">
				uView - 多平台快速开发的UI框架
			</text>
		</view>
		<view class="button-demo">
			<u-button :ripple="true">按钮组件演示</u-button>
		</view>
		<view class="link-demo">
			<u-link :color="$u.color['primary']" :under-line="true" href="http://www.uviewui.com">跳转uView文档：www.uviewui.com</u-link>
		</view> -->
		
		
	</view>
</template>

<script>
	import cRank from '../../components/c-rank.vue';
	export default {
		data() {
			return {
				title: 'Hello',
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				swiperList: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				mode: 'round',
				indicatorPos: 'bottomCenter',
				listNotice: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				
			}
		},
		computed: {
			slotRightCurrent() {
				return this.slotRight ? 0 : 1;
			}
		},
		onLoad() {

		},
		methods: {
			clickSwiper(index) {
				this.$refs.uToast.show({
					title: `点击了第${index + 1}张图片`,
					type: 'success'
				})
			},
			changeSwiper(index) {
				// console.log(index);
			}
		},
		components: {
		  cRank
		},
		
		
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		// align-items: center;
		// justify-content: center;
		// padding: 40rpx;
		// background-color: #ECEEF1;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	// 
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx; 
	}
	.wrap {
		width: 100vw;
		padding: 20rpx 0;
	}
	// .grid-list-box
	.grid-list-box{
		.list-title{
			font-weight: bold;
			font-size: 24upx;
		}
		.list-price{
			color: $u-type-error;
			font-weight: bold;
			font-size: 34upx;
			padding: 10upx 0;
		}
		.list-increase{
			color: $u-type-error;
			font-size: 24upx;
			font-weight: bold;
		}
		.list-cny{
			// color: $u-tips-color;
			font-size: 24upx;
			// font-weight: bold;
		}
	}
	

.ad-image{
	width: 100vw;
	height: 160upx;
	margin: 5upx 0;
}


.product-list{
	.product-title{
		font-weight: bold;
		color: $u-content-color;	
	}
	.product-list-item{
		margin: 10upx 0;
		border-bottom: 1upx solid #DBF1E1;
	}
	.product-list-item:last-child{
		border-bottom:none;
	}
}
</style>
